در این درس با تگ img ، شناسه src و alt ، تگهای Map و Area و چگونگی نمایش تصاویر و همچنین تنظیم محل آنها در سندهای اچتمل آشنا خواهید شد. تگ img و شناسه src یا source مهمترین شناسه برای درج و تعریف یک تصویر src یا source نام دارد و مقدار این شناسه آدرس یا URL تصویر میباشد. تصاویری که مرورگر در یک صفحه وب نمایش میدهد میتوانند در همان دایرکتوری صفحه اچتمل، در دیگر دایرکتوریهای همان سایت و یا در فضای بیکران وب قرار داشته باشند. شکل ساده درج یک تصویر: <img src="url">
در زبان اچتمل تصاویر را با کمک تگ <img> تعریف میکنند. تگ <img> از نوع تگهای خالی است، بدین معنا که فقط دارای یک یا چند شناسه و attribute بوده و دارای تگ انتهائی یا <img/> نیست.
مقدار url آدرس اینترنتی تصویر میباشد و مثلا اگر تصویری که قرار است که در صفحه درج شود در همان دایرکتوری قرار دارد و نامش me.jpg ، کافی است که به جای url فقط نام تصویر یعنی me.jpg را بنویسید و اگر تصویر در سایتی دیکر قرار دارد url کامل آنرا بنویسید. مثلا تصویر لوگو سایت google.com دارای url ی برابر http://www.google.com/images/logo.gif است.در این url نام تصویر logo.gif بوده، در دایرکتوری images قرار داشته و روی وب سایت google.com قرار دارد.
--------------------------------------------------------------------------------
شناسه های width و height در تگ img
کاربرد شناسه های width و height تعیین عرض و ارتفاع نمایش تصویر است. اگر از این شناسه ها استفاده نکنید، مرورگر ابتدا تصویر را لود کرده و سپس طول و عرض آنرا یافته و در نهایت نمایش میدهد. با نوشتن مقادیری غیر از مقادیر واقعی طول و عرض تصویر میتوانید به تغییر شکل و ابعاد آن بپردازید و آنرا مثلا کوچکتر، بزرگتر و یا کشیده تر نمایش دهید. مثال زیر نحوه درج تصویری را با قید ابعاد آن شرح میدهد:
<img src="http://www.google.com/images/logo.gif" width="276" height="110" >
توصیه میشود که حتما ابعاد تصویر را با کمک شناسه های width و height قید کنید، اینکار سبب کمک به مرورگر در تسریع شروع نمایش صفحه خواهد شد.(در واقع با قید ابعاد تصویر، مرورگر قبل از لود تصویر میداند که چه مقدار از صفحه نمایش باید به تصویر باید اختصاص داده شود و قبل از لوذ شدن تمامی تصاویر مرورگر شروع به نمایش قالب و چارچوب کلی صفحه خواهد کرد.)
--------------------------------------------------------------------------------
شناسه Alt یا "alternate text" یا متن جایگزین
اگر مرورگر به هر دلیلی نتواند که یک تصویر را نمایش دهد و یا مرورگر از نوع مرورگرهائی باشد که فقط متن را نمایش میدهند، متن و text ی که با کمک شناسه alt تعیین شده است نمایش داده خواهد شد. همچنین در اغلب مرورگرها با قرارگرفتن ماوس بروی یک تصویر، متن تعیین شده توسط شناسه alt نمایش داده خواهد شد. با کمک alt اطلاعات اضافی مربوط به تصویر قابل نمایش میباشد.مثال زیر نحوه درج تصویری را با قید متن جایگزین آن شرح میدهد:
<"img src="http://www.tehroon20.com/icon/html.gif" alt="tehroon20>
--------------------------------------------------------------------------------
وبلاگها و اضافه کردن تصاویر:
اگر وبلاگی داشته و میخواهید که تصویری به آن اضافه کنید دو حالت مختلف ممکن است که پیش آید:
- الف) تصویر روی سایتی دیگر قرار داشته و شما هم میخواهید از آن تصویر که در سایتی دیگر قرار دارد استفاده کنید. در این حالت از آدرس مستقیم تصویر در شناسه src استفاده کنید، مانند :
<img src="http://www.google.ca/images/hp0.gif" width=258 height=78 >
- ب) تصویر روی هارد کامییوتر شما است و هنوز بروی وب منتقل نشده است. در این حالت چون اغلب سیستم های وبلاگ امکان ذخیره تصاویر را به شما نمی دهند باید ابتدا تصویرتان را با کمک FTP یا روشهای دیگر به روی سایتی دیگر منتقل کنید. شرکتهای مختلفی فضای مجانی برای ساخت صفحات وب و ذخیره اطلاعات و تصاویر در اختیار شما قرار میدهند و در یکی از سؤالهای این FAQ فهرست این شرکتها را میتوانید ببینید. بنابراین ابتدا فضائی در وب تهیه کرده، سپس تصویرتان را Upload کرده (با کمک FTP یا روشهاس دیگر ) و سپس در شناسه src از تگ img آدرس جدید تصویر را قید کنید.
--------------------------------------------------------------------------------
چند نکته مهم:
- اگر در یک صفحه اچتمل از 10 تصویر استفاده شده باشد، مرورگر باید 11 فایل را لود کند.( خود صفحه به علاوه 10 تصویر)
- استفاده از تصاویر، سرعت لود شدن صفحات را پایین می آورد.با احتیاط از تصاویر استفاده کنید و به اندازه و حجم تصویر توجه داشته باشید.
- لود تصویری با حجم 50 کیلوبایت برای کسی که از مودمی با سرعت 28kbps استفاده میکند حداقل 15 ثانیه طول خواهد کشید.
- برای دیدن مشخصات تصاویر در وب کافی است که روی تصویر Right click کرذه و سپس در بخش properities آدرس،ابعاد و ظرفیت تصویر را ببینید.
- برای ذخیره تصاویر در وب کافی است که روی تصویر Right click کرذه و سپس در بخش "Save picture as" آنرا ذخیره کنید.
--------------------------------------------------------------------------------
تگ های تصاویر
Start Tag | Purpose | کاربرد |
---|---|---|
<img> | Defines an image | درج تصویر |
<map> | Defines an image map | تعریف Image map یا ؟؟؟ |
<area> | Defines an area inside an image map | تعریف ناحیه ای در داخل Image map |
منبع: Khaterat.com